<!--
 * @Author: jhw
 * @Date: 2025-08-05 10:22:40
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-22 16:51:28
 * @Description:
-->
<template>
  <div
    :class="{
      'text-center': computedStatus.position,
    }"
  >
    <MaterialsHeader :serialNum="serialNum" v-bind="computedStatus" />
    <div class="flex flex-wrap">
      <el-radio-group class="flex flex-wrap" v-model="radioValue" @click.stop @change="emitAnswer">
        <el-radio
          v-for="(item, index) in computedStatus.options"
          class="picOption flex mb-15px"
          :value="item.picTitle"
          :key="index"
        >
          <PicItem :key="index" v-bind="{ ...item, index }" />
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import MaterialsHeader from '@/components/SurveyComs/Common/MaterialsHeader.vue';
import PicItem from '@/components/SurveyComs/Common/PicItem.vue';
import { SurveyComNameEnum, type OptionsStatus } from '@/types';
import {
  getCurrentStatus,
  getPicTitleDescStatusArr,
  getStringStatusByCurrentStatus,
  getTextStatus,
} from '@/utils';
import { computed, ref } from 'vue';

const props = defineProps<{
  componentId: string;
  status: OptionsStatus;
  serialNum: number;
}>();

const computedStatus = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  options: getPicTitleDescStatusArr(props.status.options),
  position: getCurrentStatus(props.status.position),
  titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
  descSize: getStringStatusByCurrentStatus(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}));

const radioValue = ref<string>('');
const emit = defineEmits(['updateAnswer']);

const emitAnswer = () => {
  emit('updateAnswer', {
    serialNum: props.serialNum,
    title: computedStatus.value.title,
    answer: radioValue.value,
    type: SurveyComNameEnum.singlePicSelect,
    componentId: props.componentId,
  });
};
</script>

<style scoped lang="scss">
.picOption {
  @apply h-auto flex-col-reverse;
}
</style>
